<template>
	<view class="page-view exchange tabbar">
		<background src="@/static/excharge/1_bg.png" :height="3074"></background>
		<view class="page-content">
			<!-- 顶部图片 -->
			<view class="big_img">
				<image src="/static/excharge/1_1.png" ></image>
			</view>
			<view class="class2">
				<!-- 兑换码和龙币 -->
				<view class="my">
					<view class="my_1">
						<image :src='excharge != null? "/static/excharge/1_2.png":"/static/excharge/btn_1_2_gray.png"' @click="btn_qrcode"></image>
					</view>
					<view class="my_2">
						<view class="longbi">
							<image src="/static/excharge/1_3_2.png" class="gold"></image>
							<text class="longbiText"> 我的积分：{{userScore}}枚</text>
						</view>
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="goods">
					<block v-for="row in rows" :key="row">
						<exchange-cell :item="list[row * 2]" @change="onNumberChange" :ref="'cell'+(row * 2)" @defeat="defeat = true" @noscore="noscore = true"></exchange-cell>
						<exchange-cell :item="list[row * 2 + 1]" @change="onNumberChange" :ref="'cell'+(row * 2 + 1)" @defeat="defeat = true" @noscore="noscore = true"></exchange-cell>
					</block>
				</view>
				<!-- 兑换规则 -->
				<view class="exchange_title">
					<image src="/static/excharge/1_8_1.png"></image>
				</view>
				<view class="exchange_rule">
					<view class="rule_bac">
						<net-image :src="rulesUrl"></net-image>
					</view>
					<!-- <view class="rule_word">
						<image src="/static/excharge/1_8_3.png"></image>
					</view> -->
			
				</view>
				<!-- 装饰星星 -->
				<!-- <image src="/static/excharge/1_10_1.png" class="star_1"></image> -->
				<!-- <image src="/static/excharge/1_10_2.png" class="star_2"></image> -->
				<!-- <image src="/static/excharge/1_10_3.png" class="star_3"></image> -->
				<!-- 商品不足弹窗 -->
				<view class="bac" v-show="defeat">
					<view class='defeat'>
						<image class="defeat_image" src="/static/excharge/1_12_1.png"></image>
						<image class="defeat_ok" src="/static/excharge/1_12_2.png" @click="defeat_ok"></image>
					</view>
				</view>
				<view class="noscore" v-show="noscore">
					<image src="/static/excharge/no_score.png" class="noscore_image"/>
					<image src="/static/excharge/1_12_2.png" class="noscore_ok" @click="noscore_ok"/>
				</view>
				
				<!-- 兑换成功弹窗 -->
				<view class="bac" @click="victory_ok" v-show="victory">
					<view class='victory'>
						<image class="victory_image" src="/static/excharge/1_11_1.png"></image>
						<canvas type="2d" id="qrcode" canvas-id="myQrcode"></canvas>
					</view>
				</view>
			</view>
		</view>
		<!-- 合计 -->
		<view class="total">
			<view class="all_price">
				<text style="margin-right: 12rpx; vertica-align:middle;">合计 </text>
				<image src="/static/excharge/1_3_2.png" class="gold"></image>
				<text style="vertica-align:middle;" class="price">{{totalPrice}}</text>
			</view>
			<view class="btn_exchange" @click="btn_victory">
				<image src="/static/excharge/1_9.png"></image>
			</view>
		</view>
		<custom-tabbar :selected-index="3"></custom-tabbar>
	</view>
</template>

<script>
	// const qrcode = require('../../weapp.qrcode.esm.js')
	import drawQrCode from '../../weapp.qrcode.esm.js'
	import jishuqi from '@/components/jishuqi.vue'
	import {COMMON_SHARE,RES_PREFIX, SETTINGS} from '@/utils/const.js'
	import CustomTabbar from '@/components/customTabbar.vue'
	import Background from '@/components/background.vue'
	import NetImage from '@/components/netImage.vue'
	import ExchangeCell from './components/exchangeCell.vue'
	import {getList,exchange} from '@/api/product.js'
	import {mapState,mapGetters} from 'vuex'
	import {reportEvent} from '@/services/miniApi.js'
	export default {
		components: {
			jishuqi,
			CustomTabbar,
			Background,
			ExchangeCell,
			NetImage
		},
		data() {
			return {
				noscore: false,
				defeat: false,
				order: 100,
				q: 0,
				victory: false,
				qrcode: null,
				sending: false,
			}
		},
		computed: {
			...mapGetters(['totalPrice','userScore']),
			...mapState({
				list: state=>state.product.products,
				selected: state=>state.product.selected,
				excharge: state=>state.product.excharge
			}),
			rulesUrl(){
				return SETTINGS.EXCHARGE_RULES_URL
			},
			rows(){
				return this.list.length % 2 == 0 ? ~~(this.list.length / 2) : (~~(this.list.length / 2) + 1)
			}
		},
		methods: {
			//显示兑换失败的弹窗
			getdefeat() {
				this.defeat = true;
			},
			//隐藏兑换失败的弹窗
			defeat_ok() {
				this.defeat = false
			},
			noscore_ok(){
				console.log('noscore_ok')
				this.noscore = false
			},
			reset(){
				this.$store.commit('resetSelection')
				for(let name in this.$refs){
					if(name.startsWith('cell')){
						this.$refs[name][0].reset()
					}
				}
			},
			drawQrcode(data){
				return new Promise((resolve, reject)=>{
					const query = uni.createSelectorQuery()
					query.select('#qrcode').fields({
						node: true, size: true
					}).exec((res)=>{
						console.log(res[0])
						const canvas = res[0].node
						
						drawQrCode({
							canvas: canvas,
							canvasId: 'myQrcode',
							width: 100,
							height: 100,
							background: '#ffffff',
							foreground: '#000000',
							text: data,
						})
						resolve()
					})
				})
			},
			async doExchange(){
				if(this.selected.length == 0){
					if(this.userScore > 0){
						uni.showToast({
							title: "请先选择商品"
						})
					}
					return
				}
				
				reportEvent('exchange')
				const resp = await exchange(this.selected.map( (select) => {
					return {
						id: select.id,
						count: select.num
					}
				}))
				
				this.$store.dispatch('fetchScore')
				this.$store.dispatch('fetchProducts')
				if(resp.chargeStatus != 1){
					let msg = ''
					if(resp.chargeStatus == 0){
						// msg = '商品库存不足'
						this.defeat = true
					}else if(resp.chargeStatus == 2){
						msg = '今天已兑过商品'
					}else if(resp.chargeStatus == 3){
						// msg = '龙币积分不足'
						this.noscore = true
					}
					
					if(msg != ''){
						uni.showToast({
							icon: 'none',
							title: msg
						})
					}
					return
				}
				
				this.reset()
				this.victory = true
				await this.drawQrcode(resp.qrcode)
				
				this.$nextTick(()=>{
					this.$store.dispatch('fetchExcharge')
				})
				
				
			},
			//点击兑换按钮
			btn_victory() {
				if(this.sending)return
				this.sending = true
				
				this.doExchange().then(()=>{
					this.sending = false
				}).catch((err)=>{
					console.log(err, typeof(err))
					this.sending = false
					uni.showToast({
						title: err.message
					})
				})
			},
			btn_qrcode(){
				if(this.sending || this.excharge == null)return
				console.log('qrcode = ', this.excharge.qrcode)
				this.victory = true
				this.drawQrcode(this.excharge.qrcode).then(()=>{
					this.sending = false
				}).catch((err)=>{
					this.sending = false
					this.victory = false
					uni.showToast({
						icon: 'none',
						title: '获取兑换码失败'
					})
				})
			},
			//隐藏兑换成功的弹窗
			victory_ok() {
				this.victory = false
			}
		},
		onShow() {
			this.reset()
			this.$store.dispatch('fetchScore')
			this.$store.dispatch('fetchProducts')
			this.$store.dispatch('fetchExcharge')
			uni.hideTabBar()
			reportEvent('tabbar_prize')
		},
		onShareAppMessage(){
			return COMMON_SHARE
		}
	}
</script>

<style>
	.page-view.exchange.tabbar .page-content {
		height: auto;
		top: 0;
		bottom: 100rpx;
		
	}
	.price {
		color: #F3CE8B;
	}
	/* 背景 */
	.exchange {
		/* width: 100%;
		height: 2640rpx; */
	}

	.class2 {
		position: relative;
		top: -1rpx;
		width: 100%;
		height: 100%;
	}

	/* 大图 */
	.big_img {
		width: 750rpx;
		height: 550rpx;
	}

	.big_img image {
		width: 100%;
		height: 100%;
	}

	/* 兑换码和龙币 */
	.my {
		padding-top: 50rpx;
		width: 750rpx;
		height: 300rpx;
		color: white;
	}

	.my_1 {
		margin: 0 auto;
		width: 300rpx;
		height: 100rpx;
		text-align: center;
	}

	.my_1>image {
		position: relative;
		z-index: 1;
		top: -350rpx;
		width: 100%;
		height: 100%;
	}

	

	.my_2 {
		position: relative;
		top: -150rpx;
		margin: 0 auto;
		width: 300rpx;
		height: 75rpx;
		text-align: center;
	}

	.longbi {
		line-height: 60rpx;
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		vertical-align: middle;
		position: relative;
		top: -80rpx;
	}

	.longbiText {
		position: relative;
		top: -4rpx;
	}

	/* 商品信息 */
	.goods {
		position: relative;
		top: -350rpx;
		margin: 0 auto;
		width: 720rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.goods_1 {
		width: 300rpx;
		height: 400rpx;
		border-radius: 15rpx;
		text-align: center;
		padding-top: 25rpx;
		margin-bottom: 25rpx;
		background-image: url(/static/excharge/1_4.png); 
		background-size: 100% 100%;
	}

	.goods_img {
		width: 230rpx;
		height: 185rpx;
	}

	.two {
		margin-top: 30rpx;
		width: 300rpx;
		height: 60rpx;
	}

	.name_price {
		display: flex;
		justify-content: space-around;
	}

	.goods_name {
		color: white;
	}

	.goods_number {
		color: rgb(197, 202, 211);
		position: relative;
		top: -15rpx;
		left: -50rpx;
		font-size: 25rpx;
	}

	.goods_price {
		color: yellow;
	}

	/* .goods_car {
  width: 50rpx;
  height: 50rpx;
} */
	/* 兑换规则 */
	.exchange_title {
		position: relative;
		top: -330rpx;
		margin: 0 auto;
		width: 261rpx;
		height: 137rpx;
		text-align: center;
	}

	.exchange_title image {
		width: 100%;
		height: 100%;
	}

	/* 规则内容 */
	.exchange_rule {
		position: relative;
		top: -350rpx;
		margin: 0 auto;
		width: 750rpx;
		height: 723rpx;
		margin-bottom: 100rpx;
		text-align: center;
	}

	.rule_bac {
		width: 750rpx;
		height: 1110rpx;
	}

	.rule_bac image {
		width: 100%;
		height: 100%;
	}

	.rule_word {
		margin: 0 auto;
		width: 750rpx;
		height: 487rpx;
		position: relative;
		top: -590rpx;
		overflow: hidden;
	}

	.rule_word image {
		width: 533rpx;
		height: 487rpx;
	}

	/* 合计 */
	.total {
		background-color: rgb(12, 42, 67);
		position: absolute;
		bottom: 0;
		margin: 0 auto;
		padding-top: 13rpx;
		width: 750rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		color: white;
	}

	.all_price {
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.btn_exchange {
		width: 150rpx;
		height: 60rpx;
	}

	.btn_exchange image {
		width: 100%;
		height: 100%;
	}

	/* 金币图片 */
	.gold {
		color: #F3CE8B;
		width: 30rpx;
		height: 30rpx;
		margin-right: 12rpx;
	}
	
	.total .gold {
		vertical-align: middle;
	}
	
	/* 装饰星星 */
	/* .star_1 {
		position: absolute;
		top: 1050rpx;
		width: 850rpx;
		height: 85rpx;
	}

	.star_2 {
		position: absolute;
		top: 1900rpx;
		right: 0;
		width: 65rpx;
		height: 65rpx;
	}

	.star_3 {
		position: absolute;
		left: 10rpx;
		top: 2880rpx;
		width: 65rpx;
		height: 65rpx;
	} */

	/* 商品不足弹窗 */
	.defeat {
		position: fixed;
		top: 300rpx;
		left: 84rpx;
/* 		width: 600rpx;
		height: 450rpx; */
		width: 582rpx;
		height: 432rpx;
		/* border: 1px red solid; */
	}

	.defeat_image {
		width: 582rpx;
		height: 432rpx;
		z-index: 1;
	}

	.defeat_ok {		
		position: fixed;
		z-index: 2;
		top: 605rpx;
		left: 299rpx;
		width: 154rpx;
		height: 66rpx;
	}

	.bac {
		position: fixed;
		z-index: 998;
		top: -550rpx;
		background-color: rgba(0, 0, 0, 0.5);
		width: 750rpx;
		height: 3200rpx;
	}

	/* 兑换成功弹窗 */
	.victory {
		position: fixed;
		z-index: 999;
		top: 150rpx;
		left: 75rpx;
		width: 600rpx;
		height: 700rpx;
	}

	.victory_image {
		width: 600rpx;
		height: 700rpx;
		z-index: 999;
	}

	#qrcode {
		z-index: 999;
		position: fixed;
		top: 430rpx;
		left: 240rpx;
		width: 260rpx;
		height: 260rpx;
	}
	.noscore {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.noscore .noscore_image {
		position: absolute;
		left: 84rpx;
		top: 300rpx;
		width: 582rpx;
		height: 432rpx;
	}
	.noscore .noscore_ok {
		position: absolute;
		z-index: 2;
		top: 605rpx;
		left: 299rpx;
		width: 154rpx;
		height: 66rpx;
	}
</style>
